{% extends "base.html" %}

{% block title %}{% if signin %}Signin{% else %}Register{% endif %}{% endblock %}

{% block head_css %}
<link href="/static/css/bootstrap-datepicker.css" rel="stylesheet" />
<style type="text/css">
    legend {
        margin-bottom: 0;
    }
</style>
{% endblock %}

{% block head_script %}
<script type="text/javascript" src="/static/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="/static/js/validator.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#open-signin').click(function(e) {
        e.preventDefault();
        $('#register-form').fadeOut();
        $('#signin-sidebar').fadeOut();
        $('#signin-form').fadeIn();
        $('#register-sidebar').fadeIn();
    });

    $('#open-register').click(function(e) {
        e.preventDefault();
        $('#register-form').fadeIn();
        $('#signin-sidebar').fadeIn();
        $('#signin-form').fadeOut();
        $('#register-sidebar').fadeOut();
    });

    $(function () {
        function find_container(input) {
            return input.parent().parent();
        }
        function remove_validation_markup(input) {
            var cont = find_container(input);
            cont.removeClass('error success warning');
            $('.help-inline.error, .help-inline.success, .help-inline.warning',
                cont).remove();
        }
        function add_validation_markup(input, cls, caption) {
            var cont = find_container(input);
            cont.addClass(cls);
            input.addClass(cls);
                
            if (caption) {
                var msg = $('<span class="help-inline"/>');
                msg.addClass(cls);
                msg.text(caption);
                input.after(msg);
            }       
        }
        function remove_all_validation_markup(form) {
            $('.help-inline.error, .help-inline.success, .help-inline.warning',
                form).remove(); 
            $('.error, .success, .warning', form)
                .removeClass('error success warning');
        }               
        $('form').each(function () {
            var form = $(this);
                    
            form
                .validator({
                })
                .bind('reset.validator', function () {
                    remove_all_validation_markup(form);
                })
                .bind('onSuccess', function (e, ok) {
                    $.each(ok, function() {
                        var input = $(this);
                        remove_validation_markup(input);
                        // uncomment next line to highlight successfully
                        // validated fields in green
                        //add_validation_markup(input, 'success');
                    }); 
                })
                .bind('onFail', function (e, errors) {
                    $.each(errors, function() {
                        var err = this;
                        var input = $(err.input);
                        remove_validation_markup(input);
                        add_validation_markup(input, 'error',
                            err.messages.join(' '));
                    });
                    return false;
                });
        });
    });

    $('#register-form').submit(function () {
        var form = $(this);
        if ($('#input-pass').val() !== $('#password2').val()) {
            form.data('validator').invalidate({
                password2 : "Passwords don't match"
            });
            return false;
        }
    });
});
</script>
{% endblock %}

{% block main_content %}
<div class="row">
    <div class="span6 offset2">
        <form id="register-form" action="/register" class="well form-horizontal" method="post" {% if signin %}style="display:none;"{% endif %}>
            <fieldset>
                <legend>Basic Information</legend>
                <div class="control-group">
                    <label class="control-label" for="input-username">Username</label>
                    <div class="controls">
                        <input name="username" required="required" pattern="[0-9a-zA-Z_]{4,}" type="text" id="input-username" placeholder="username should be unique" value="" class="text" />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="input-email">Email</label>
                    <div class="controls">
                        <input name="email" required="required" type="email" id="input-email" minlength="6" placeholder="your email goes here" value="" class="email" />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="input-pass">Password</label>
                    <div class="controls">
                        <input name="password" type="password" id="input-pass" required="required" value="" minlength="6" placeholder="at least 6 characters long" class="text password" />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="password2">Confirm Pasword</label>
                    <div class="controls">
                        <input name="password2" type="password" id="password2" required="required" placeholder="repeat your password" value="" class="text password" />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" >Gender</label>
                    <div class="controls">
                        <label class="radio inline">
                            <input type="radio" class="radio" value="M" checked="" name="gender" />
                            Male
                        </label>
                        <label class="radio inline">
                            <input type="radio" class="radio" value="F" name="gender" />
                            Female
                        </label>
                        <label class="radio inline">
                            <input type="radio" class="radio" value="O" name="gender" />
                            Other
                        </label>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="input-birthday">Birthday</label>
                    <div class="controls">
                        <input type="text" id="input-birthday" data-datepicker="datepicker" required="required" placeholder="yyyy-mm-dd" value="" name="birthday" />
                    </div>
                </div>
            </fieldset>
            <fieldset>
                <legend>Address Information</legend>
                <div class="control-group">
                    <label class="control-label" for="input-name">Name</label>
                    <div class="controls">
                        <input name="name" type="text" id="input-name" required="required" placeholder="your name here" value="" class="text" />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="input-country">Country</label>
                    <div class="controls">
                        <input name="country" type="text" id="input-country" required="required" value="" class="text" />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="input-state">State</label>
                    <div class="controls">
                        <input name="state" type="text" id="input-state" required="required" value="" class="text" />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="input-city">City</label>
                    <div class="controls">
                        <input name="city" type="text" id="input-city" required="required" value="" class="text" />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="input-street">Steet</label>
                    <div class="controls">
                        <input name="street" type="text" id="input-street" required="required" value="" class="text input-xlarge" />
                    </div>
                </div>
            </fieldset>
            <fieldset>
                <div class="control-group">
                    <label class="control-label" for="input-rules"></label>
                    <div class="controls">
                        <label class="checkbox">
                            <span>I agree to the <a href="#">Terms of Service and Privacy Policy</a> of this site.</span>
                            <input type="checkbox" required="required"class="checkbox" checked="checked" name="rule" id="input-rule" />
                        </label>
                    </div>
                </div>
                <div class="form-actions">
                    <input type="submit" class="button btn btn-primary" value="Create account" name="" />
                </div>
            </fieldset>
        </form>
        <form id="signin-form" action="/signin" class="well form-horizontal" method="post" {% if not signin %}style="display:none;"{% endif %}>
            {% if message %}
            <div class="alert alert-success">
                <a data-dismiss="alert" class="close">×</a>
                {{ message }}
            </div>
            {% endif %}
            <fieldset>
                <legend>Sign in</legend>
                <div class="control-group">
                    <label class="control-label" for="input-username">Username</label>
                    <div class="controls">
                        <input name="username" required="required" pattern="[0-9a-zA-Z_]{4,}" type="text" id="input-username"  value="" class="text" />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="input-pass">Password</label>
                    <div class="controls">
                        <input name="password" type="password" id="input-pass" required="required" value="" minlength="6" class="text password" />
                    </div>
                </div>
                <div class="form-actions">
                    <input type="submit" class="button btn btn-primary" value="Sign in" name="" />
                </div>
            </fieldset>
        </form>
    </div>
    <div class="span2">
        <div id="signin-sidebar" class="well" {% if signin %}style="display:none;"{% endif %}>
            <p style="font-size: 1.3em;">Already a member?</p>
            <div>
                <a id="open-signin" href="#" class="btn btn-info">Sign in</a>
            </div>
        </div>
        <div id="register-sidebar" class="well" {% if not signin %}style="display: none;"{% endif %}>
            <p style="font-size: 1.3em;">Not a member?</p>
            <div>
                <a id="open-register" href="#" class="btn btn-info">Register</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}
